<template>
  <Tabs value="student">
    <TabPane :label="h => render_tab_title(h, 'student')" name="student">
      <student-list ref="student" @on-change-total="total => (this.student_count = total)" />
    </TabPane>
    <TabPane :label="h => render_tab_title(h, 'teacher')" name="teacher">
      <teacher-list ref="teacher" @on-change-total="total => (this.teacher_count = total)" />
    </TabPane>
    <TabPane :label="h => render_tab_title(h, 'group')" name="organization">
      <organization-list ref="organization" @on-change-total="total => (this.organization_count = total)" />
    </TabPane>
    <TabPane :label="h => render_tab_title(h, 'room')" name="room">
      <room-list ref="room" @on-change-total="total => (this.room_count = total)" />
    </TabPane>
    <TabPane :label="h => render_tab_title(h, 'student_group')" name="student_organization">
      <student-organization-list ref="student-organization" @on-change-total="total => (this.student_organization_count = total)" />
    </TabPane>
  </Tabs>
</template>
<script>
import StudentList from './list/student'
import TeacherList from './list/teacher'
import OrganizationList from './list/organization'
import RoomList from './list/room'
import StudentOrganizationList from './list/student-organization'
export default {
  props: {
    importErrorStudent: {
      type: Number,
      default: 0
    },
    importErrorTeacher: {
      type: Number,
      default: 0
    },
    importErrorGroup: {
      type: Number,
      default: 0
    },
    importErrorClassRoom: {
      type: Number,
      default: 0
    },
    importErrorStudentGroup: {
      type: Number,
      default: 0
    }
  },
  components: {
    'student-list': StudentList,
    'teacher-list': TeacherList,
    'organization-list': OrganizationList,
    'room-list': RoomList,
    'student-organization-list': StudentOrganizationList
  },
  name: 'tab',
  data () {
    return {
      student_count: 0,
      teacher_count: 0,
      organization_count: 0,
      room_count: 0,
      student_organization_count: 0
    }
  },
  methods: {
    render_tab_title (h, cate) {
      let title = ''
      let style = {}
      const errorStyle = {
        fontWeight: 'bold',
        color: 'red'
      }
      if (cate === 'student') {
        const { importErrorStudent, student_count } = this
        style = importErrorStudent > 0 ? errorStyle : {}
        if (importErrorStudent > 0) {
          title = `学生数据(${importErrorStudent}/${student_count})`
        } else {
          title = `学生数据(${student_count})`
        }
      } else if (cate === 'teacher') {
        const { importErrorTeacher, teacher_count } = this
        style = importErrorTeacher > 0 ? errorStyle : {}
        if (importErrorTeacher > 0) {
          title = `老师数据(${importErrorTeacher}/${teacher_count})`
        } else {
          title = `老师数据(${teacher_count})`
        }
      } else if (cate === 'group') {
        const { importErrorGroup, organization_count } = this
        style = importErrorGroup > 0 ? errorStyle : {}
        if (importErrorGroup > 0) {
          title = `班级数据(${importErrorGroup}/${organization_count})`
        } else {
          title = `班级数据(${organization_count})`
        }
      } else if (cate === 'room') {
        const { importErrorClassRoom, room_count } = this
        style = importErrorClassRoom > 0 ? errorStyle : {}
        if (importErrorClassRoom > 0) {
          title = `教室数据(${importErrorClassRoom}/${room_count})`
        } else {
          title = `教室数据(${room_count})`
        }
      } else if (cate === 'student_group') {
        const { importErrorStudentGroup, student_organization_count } = this
        style = importErrorStudentGroup > 0 ? errorStyle : {}
        if (importErrorStudentGroup > 0) {
          title = `学生分班数据(${importErrorStudentGroup}/${student_organization_count})`
        } else {
          title = `学生分班数据(${student_organization_count})`
        }
      }
      return h('span', {
        style
      }, title)
    },
    reload (jobID) {
      this.$refs['student'].reload(jobID)
      this.$refs['teacher'].reload(jobID)
      this.$refs['organization'].reload(jobID)
      this.$refs['room'].reload(jobID)
      this.$refs['student-organization'].reload(jobID)
    }
  }
}
</script>
